<template>
  <div class="haiyun">
    <div ref='haiyun' class="haiyunEcharts" style="display: none;"></div>
    <!-- <img src="../../../../static/img/lunchuan.png" style="display: none;" ref='carImg' /> -->
    <img src="../../../../static/img/haiyun.gif" />
    <div class="listWrap">
      <div class="listTit">
        <span>船舶编号</span>
        <span>发港地</span>
        <span>运输状态</span>
        <span>当前城市</span>
      </div>
      <div class="swiper-container swiper-container3 listCon">
        <div class="swiper-wrapper">
          <div class="swiper-slide list">
            <span>MILD TUNE 2104E</span>
            <span>青岛港</span>
            <span>装卸</span>
            <span>东京</span>
          </div>
          <div class="swiper-slide list">
            <span>COSCO SHIPPING A7</span>
            <span>青岛港</span>
            <span>在港</span>
            <span>青岛</span>
          </div>
          <div class="swiper-slide list">
            <span>MILD TUNE 2104E</span>
            <span>青岛港</span>
            <span>装卸</span>
            <span>东京</span>
          </div>
          <div class="swiper-slide list">
            <span>COSCO SHIPPING A7</span>
            <span>青岛港</span>
            <span>在港</span>
            <span>青岛</span>
          </div>
        </div>
      </div>
      <div class="listBtn" @click="showList">
        <span>&lt;&lt;&lt;</span>
        <span>更多</span>
        <span>&gt;&gt;&gt;</span>
      </div>

    </div>
    <div v-if="listTckShow" class="listTckWrap">
      <div class="listTckTit">当日海运运力详情</div>
      <img class="listTckGb" src="../../../../static/img/guanbi.png" @click="hideList"/>
      <div class="listTckCon">
        <div class="listTckConTit">
          <span>海运线</span>
           <span class="width15">船舶编号</span>
          <span>起运地</span>
          <span>目的地</span>
          <span class="width13">（计划）起运时间</span>
          <span class="width13">（计划）到港时间</span>
          <span>在途情况</span>
          <span>是否延误</span>
          <span class="width13">预计到港时间</span>
        </div>
        <div class="listTckConTxt">
          <div class="listTckConTxtList listTckConTxtListbg">
            <span>东亚线</span>
            <span class="width15">MILD TUNE 2104E</span>
            <span>青岛港</span>
            <span>东京港</span>
            <span class="width13">2021-3-21 15:00</span>
            <span class="width13">2021-3-23 11:00</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 11:00</span>
          </div>
          <div class="listTckConTxtList listTckConTxtListbg">
            <span>东南亚线</span>
            <span class="width15">COSCO SHIPPING AQUARIUS 012W</span>
            <span>青岛港</span>
            <span>新加波港</span>
            <span class="width13">2021-3-21 10:00</span>
            <span class="width13">2021-4-3 10:00</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-4-3 10:00</span>
          </div>
         <!-- <div class="listTckConTxtList">
            <span>东南亚线</span>
            <span class="width15">COSCO SHIPPING AQUARIUS 012W</span>
            <span>青岛港</span>
            <span>新加波港</span>
            <span class="width13">2021-3-21 10:00</span>
            <span class="width13">2021-4-3 10:00</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-4-3 10:00</span>
          </div> -->

        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'haiyun',
    components: {

    },
    data() {
      return {
listTckShow:false,
      }
    },
    mounted() {
      let swiper3 = new Swiper('.swiper-container3', {
        direction: 'vertical',
        slidesPerView: 2,
        //循环播放
        loop: true,
        // 自动播放时间
        autoplay: true,
        // 播放的速度
        speed: 2000,
      });
      this.getEchartData()
    },
    methods: {
      showList(){
        this.listTckShow=true
      },
      hideList(){
        this.listTckShow=false
      },
      getEchartData() {
        const haiyun = this.$refs.haiyun;
        if (haiyun) {
          const myChart = this.$echarts.init(haiyun)
          var that = this;
          var option = {

            grid: {
              containLabel: true,
              left: that.commonFunction.fontSize(0.1),
              top: that.commonFunction.fontSize(0.3),
              right: that.commonFunction.fontSize(0.1),
              bottom: that.commonFunction.fontSize(0.3),
              // show:true ,
            },


            xAxis: {
              data: [
                "海运2",
                "在港1",
                "在途0",
                "装卸1",
              ],
              splitLine: {
                show: false,
                interval: 0,
                lineStyle: {
                  color: '#160f43'
                }
              },
              axisLine: {
                show: false,

                lineStyle: {
                  color: '#160f43'
                }
              },
              axisTick: {
                show: false, //隐藏X轴刻度
                length: 1
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff" //X轴文字颜色
                }
              },

            },
            yAxis: [{
              type: "value",

              splitLine: {
                show: false,
                interval: 0,
                lineStyle: {
                  color: '#160f43'
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: '#160f43'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#160f43'
                }
              },
              axisLabel: {
                show: false,
                textStyle: {
                  color: "#ebf8ac"
                }
              },

            }],
            series: [{
                name: "",
                type: "line",
                // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                // showAllSymbol: true, //显示所有图形。
                // symbol: "circle", //标记的图形为实心圆
                symbolSize: 0, //标记的大小
                itemStyle: {
                  //折线拐点标志的样式
                  color: "#11f7ca"
                },
                lineStyle: {
                  color: "#11f7ca"
                },

                areaStyle: {
                  normal: {
                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,247,202,.8)"
                      }, {
                        offset: .5,
                        color: "rgba(17,247,202,0.5)"
                      },
                      {
                        offset: 1,
                        color: "rgba(17,247,202,0)"
                      }
                    ]),
                  }
                },
                data: [2, 1, 0, 1]
              },
              {
                name: "",
                type: "bar",
                barWidth: 15,

                itemStyle: {
                  normal: {
                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(42, 50, 111, .8)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(42, 50, 111, .8)'
                      }
                    ]),
                    borderWidth: 1,
                    borderColor: '#495a9e',
                    // barBorderRadius:[5, 5, 0, 0]
                  }
                },
                data: [2, 1, 0, 1]
              }
            ]
          };


          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },

    }
  }
</script>

<style scoped>
  .haiyun {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .haiyunEcharts {
    width: 52%;
    height: 100%;
    background: url(../../../../static/img/lunchuanbg.png) no-repeat center center;
    background-size: 95% 75%;
  }

  .listWrap {
    width: 48%;
    height: 80%;
    background-image: url(../../../../static/img/zuoshangjiao.png), url(../../../../static/img/youshangjiao.png), url(../../../../static/img/youxiajiao.png), url(../../../../static/img/zuoxiajiao.png);
    background-color: rgba(11, 50, 130, .6);
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    /* border: 1px solid #6b85c0; */
    padding: .1rem .15rem;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .listTit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: .3rem;
    position: relative;
  }

  .listTit::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 95%;
    background: #4ac5d9;
    bottom: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .listTit>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
  }

  .listTit>span {
    width: 26%;
    text-align: center;
  }

  .listTit>span:nth-of-type(2) {
    width: 22%;
    text-align: center;
  }

  .listCon {
    width: 100%;
    height:70%;
    overflow: hidden;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* height: .3rem; */
    padding: .02rem 0;
    box-sizing: border-box;
  }

  .list>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
    line-height: .16rem;
    width: 26%;
    text-align: center;
    word-break: break-all;
  }

  .list>span:nth-of-type(2) {
    width: 22%;
    text-align: center;

  }

  .listBtn {

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: .12rem;
    color: #04d7ea;
    flex: 1;
    cursor: pointer;
  }
  .listTckWrap{
    width: 140%;
    height: 100%;
    background: url(../../../../static/img/tanchuang.png) no-repeat;
    background-size: 100% 100%;
    z-index: 12;
    position: absolute;
    left: 0;
    top:-.16rem;
  }
  .listTckGb{
    position: absolute;
    right: 0;
    top: .3rem;
    cursor: pointer;
  }
  .listTckTit{
    line-height: .34rem;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    width: 100%;
    letter-spacing: 1px;

  }
  .listTckCon{
    padding:.16rem;
  /*  display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
    margin-top: .08rem;
    height: 100%;
  }
   .listTckConTit{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     height: .3rem;
     background: rgba(2,112,147,.6);
   }
   .listTckConTit>span{
     width: 8.17%;
     color: #fff;
     font-size: .12rem;
     text-align: center;
   }
   /* .listTckConTit>span.width15{
     width: 12%;
   } */
   .listTckConTit>span.width13{
     width: 17%;
   }
   .listTckConTxt{
     width: 100%;
     height: 60%;
     /* flex: 1; */
     overflow: auto;
   }
   .listTckConTxtList{
     width: 100%;
     /* height: .3rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: .02rem 0;
   }
   .listTckConTxtListbg{
     background: rgba(1, 63, 104, .8);
   }
   .listTckConTxtListbg{
     background: rgba(1, 63, 104, .8);
   }

    .listTckConTxtList:hover{
      background: rgba(1,63,104,.8);
    }
   .listTckConTxtList>span{
     width:8.17%;
     color: #fff;
     font-size: .12rem;
     text-align: center;
     line-height: .14rem;
   }
   /* .listTckConTxtList>span.width15{
     width: 12%;
   } */
   .listTckConTxtList>span.width13{
     width: 17%;
   }
</style>
